<script setup lang="ts">
    import type { FormInstance, FormValidateCallback } from 'element-plus'
    import type { SystemLog } from './type'




    const baseApi = '/wcs/system-log'

    defineProps<{
        // 禁用表单内的所有组件
        disabled?: boolean
        // 禁用属性列表（只读不可输入）
        disabledProps?: string[]
        // 不可见属性列表（忽略不加载）
        invisibleProps?: string[]
    }>()

    const emit = defineEmits<{
        (e: 'complete', id?: string, isNew?: boolean): void
        (e: 'submitting', submitting: boolean): void
    }>()


    const { initRelatedData, relatedData } = useOption({
        dict: ['operateType', 'status'],
    })

    const {loadData, loading, model} = useDetail<SystemLog>(baseApi, {
    })

    const { submitting, submit } = useForm({ baseApi, successCallback: (id, isNew) => emit('complete', id, isNew) })
    watch(submitting, value => emit('submitting', value))

    //  表单
    const formRef = ref<FormInstance>()



    const validate = (callback: FormValidateCallback = (valid: boolean) => !valid && ElMessage.error({ message: '表单校验不通过', grouping: true })) =>
        Promise.all(
            [
                formRef.value,
            ]
                .map(e => e?.validate?.(callback))
                .filter(e => !!e)
        )
            .then((arr: (boolean | undefined)[]) => arr.every(e => e))
            .catch(() => false)

    defineExpose({
        init: (id?: string, refresh = true, initData?: Record<string, unknown>) => {
                // 初始化选项
                initRelatedData()
            if (model.value.id === id && !refresh) return
            // 加载数据
            loadData(id).then(() => {
                if (!id) {
                    if (initData) Object.keys(initData).forEach(key => (model.value[key as keyof SystemLog] = initData[key] as any))
                    // 自动填充时间
                    const now = new Date()
                    const pad0 = (number: number) => number.toString().padStart(2, '0')
                    const nowDate = now.getFullYear() + '-' + pad0(now.getMonth() + 1) + '-' + pad0(now.getDate())
                        model.value.logDate = nowDate
                        model.value.logTime = pad0(now.getHours()) + ':' + pad0(now.getMinutes())
                }


            })
        },
        validate,
        getData: async (relatedLabel = false) => {
            const data: Record<string, unknown> = _.cloneDeep(model.value)
            if (!relatedLabel) return data
                     
                        data.operateTypeLabel = relatedData.operateTypeOptions.find(e => e.value === data.operateType)
                     
                        data.statusLabel = relatedData.statusOptions.find(e => e.value === data.status)

            return data
        },
        submit: () => submit(model.value, formRef.value),
        reset: () => {
            formRef.value?.resetFields()
            model.value.id = void 0
        }
    })



</script>

<template>
    <el-form ref="formRef" v-loading="loading" :model="model" label-width="90px" :disabled="disabled">
        <el-row :gutter="18">
                <el-col v-if="!invisibleProps?.includes('orderCode')" :span="12">
                        <el-form-item prop="orderCode" label="订单编号">
                                <el-input
                                        v-model="model.orderCode"
                                        
                                        :disabled="disabledProps?.includes('orderCode')"
                                        clearable
                                />
                        </el-form-item>
                </el-col>
                <el-col v-if="!invisibleProps?.includes('operateType')" :span="12">
                        <el-form-item prop="operateType" label="操作类型">
                                    <el-select
                                            v-model="model.operateType"
                                            
                                            :disabled="disabledProps?.includes('operateType')"
                                            filterable
                                            clearable
                                    >
                                        <el-option v-for="item in relatedData.operateTypeOptions"
                                                   :key="item.value" v-bind="item"/>
                                    </el-select>
                        </el-form-item>
                </el-col>
                <el-col v-if="!invisibleProps?.includes('logDate')" :span="12">
                        <el-form-item prop="logDate" label="日期">
                                <el-date-picker
                                        v-model="model.logDate"
                                        
                                        :disabled="disabledProps?.includes('logDate')"
                                        clearable
                                        type="date"
                                        value-format="YYYY-MM-DD"
                                />
                        </el-form-item>
                </el-col>
                <el-col v-if="!invisibleProps?.includes('logTime')" :span="12">
                        <el-form-item prop="logTime" label="操作时间">
                                <el-time-select
                                        v-model="model.logTime"
                                        
                                        :disabled="disabledProps?.includes('logTime')"
                                        clearable
                                        start="00:00"
                                        step="00:15"
                                        end="23:59"
                                />
                        </el-form-item>
                </el-col>
                <el-col v-if="!invisibleProps?.includes('status')" :span="12">
                        <el-form-item prop="status" label="状态">
                                    <el-select
                                            v-model="model.status"
                                            
                                            :disabled="disabledProps?.includes('status')"
                                            filterable
                                            clearable
                                    >
                                        <el-option v-for="item in relatedData.statusOptions"
                                                   :key="item.value" v-bind="item"/>
                                    </el-select>
                        </el-form-item>
                </el-col>
                <el-col v-if="!invisibleProps?.includes('priority')" :span="12">
                        <el-form-item prop="priority" label="优先级">
                                <el-input
                                        v-model="model.priority"
                                        
                                        :disabled="disabledProps?.includes('priority')"
                                        clearable
                                />
                        </el-form-item>
                </el-col>
                <el-col v-if="!invisibleProps?.includes('sourceWare')" :span="12">
                        <el-form-item prop="sourceWare" label="源仓位">
                                <el-input
                                        v-model="model.sourceWare"
                                        
                                        :disabled="disabledProps?.includes('sourceWare')"
                                        clearable
                                />
                        </el-form-item>
                </el-col>
                <el-col v-if="!invisibleProps?.includes('targetWare')" :span="12">
                        <el-form-item prop="targetWare" label="目标仓位">
                                <el-input
                                        v-model="model.targetWare"
                                        
                                        :disabled="disabledProps?.includes('targetWare')"
                                        clearable
                                />
                        </el-form-item>
                </el-col>
                <el-col v-if="!invisibleProps?.includes('mrlType')" :span="12">
                        <el-form-item prop="mrlType" label="物料类型">
                                <el-input
                                        v-model="model.mrlType"
                                        
                                        :disabled="disabledProps?.includes('mrlType')"
                                        clearable
                                />
                        </el-form-item>
                </el-col>
                <el-col v-if="!invisibleProps?.includes('errorReason')" :span="12">
                        <el-form-item prop="errorReason" label="错误原因">
                                <el-input
                                        v-model="model.errorReason"
                                        
                                        :disabled="disabledProps?.includes('errorReason')"
                                        clearable
                                />
                        </el-form-item>
                </el-col>
        </el-row>
    </el-form>


</template>

<style scoped lang="scss">
    .option {
        display: flex;
        justify-content: space-between;

        .ext {
            font-size: var(--el-font-size-extra-small);
            color: var(--el-text-color-secondary);
        }
    }

</style>